<template>
  <div class="sub-card">
    <router-link :to="`/nav?name=${card.name}`"
      ><img :src="'https://ichf.cn' + pic" alt="" />
    </router-link>
    <div>
      <p class="play" @click="getVideo">
        <a  > <img src="../assets/24gf-playCircle.png" alt="" /></a>
      </p>
      <h1>
        <router-link :to="`/nav?name=${card.name}`">{{
          card.name
        }}</router-link>
      </h1>
      <p>{{ card.detail }}</p>
    </div>
  </div>

</template>

<script>
export default {
  props: ["card", "areaImage",],
  data() {
    return {
      image: "",
      
    };
  },
  computed: {
    pic() {
      for (let key in this.areaImage) {
        if (this.areaImage[key].name == this.card.name) {
          return (this.image = this.areaImage[key].image);
        }
      }
    },
  },
  methods: {
    getVideo() { 
      let q=true
      this.$parent.updateVideo(q) 
    }
  },
 
};
</script>

<style lang="scss" scoped>
.sub-card {
  transition: all 0.3s linear;
  margin: 25px;
  width: 27%;
  color: #374151;
  background-color: #fff;

  img {
    width: 100%;
    height: 210px;
  }

  div {
    text-align: center;
    padding: 20px 24px;
    position: relative;
    .play {
      position: absolute;
      top: -50%;
      left: 50%;
      margin-top: 22.5px;
      margin-left: -22.5px;
      background-color: #fff;
      border-radius: 50px;
      border: 3px solid #fff;
      width: 45px;
      height: 45px;
      img {
        width: 45px;
        height: 45px;
         cursor: pointer;
      }
      img:hover {
        opacity: 0.8;
       
      }
      
    }
   
    h1 {
      overflow: hidden;
      white-space: nowrap;
      margin-bottom: 5px;

      > a {
        color: #374151;
        font-size: 20px;
        width: 100%;
        margin-bottom: 5px;
        text-decoration: none;
      }
      a:hover {
        color: #000;
      }
    }
    p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.sub-card:hover {
  transform: scale(1.05);
}
</style>
